<template>
  <div class="wuxianghongqi-wrapper">
    <div class="wuxinghongqi">
      <div class="wuxing-wrapper">
        <div class="wuxing lg"></div>
        <div class="wx-sm-wrapper">
          <div class="wuxing sm" style="transform: rotate(45deg);"></div>
          <div class="wuxing sm" style="margin-left: 13px;transform: rotate(48deg);"></div>
          <div class="wuxing sm" style="margin-left: 13px;transform: rotate(51deg);"></div>
          <div class="wuxing sm" style="transform: rotate(54);"></div>
        </div>
      </div>
    </div>
  </div>
</template>
  
<script setup lang='ts'>
</script>
  
<style scoped>
.wuxianghongqi-wrapper {
  width: 100%;
  height: 500px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.wuxinghongqi {
  width: 288px;
  height: 192px;
  background-color: #ef2936;
}

.wuxing-wrapper {
  width: 100px;
  height: 60%;
  display: flex;
  align-items: center;
}

.wuxing {
  background-color: #e5d800;
  mask: url("../assets/svg/wx.svg");
  mask-repeat: no-repeat;
  mask-mode: luminance;
  mask-size: contain;
}

.wuxing.lg {
  width: 70px;
  height: 70px;
}

.wx-sm-wrapper {
  position: relative;
  height: 80%;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
}

.wuxing.sm {
  width: 20px;
  height: 20px;
}
</style>